import React, { Component } from "react";
import "./index.css";

const MyContext = React.createContext();
const { Provider,Consumer } = MyContext;
class A extends Component {
  state = {
    name: "tom",
    age: 18,
  };
  render() {
    const { name, age } = this.state;
    return (
      <div className="parent">
        <h3>我是A组件</h3>
        <Provider value={{ name, age }}>
          <B />
        </Provider>
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <C />
      </div>
    );
  }
}

// class C extends Component{
//     //声明接收context
//     static contextType = MyContext
//     render(){
//         console.log(this.context)
//         return <div className='grand'>
//             <h3>我是C组件</h3>
//             <h4>我从A组件接收到的用户名：{this.context.name},年龄为：{this.context.age}</h4>
//         </div>
//     }
// }

function C() {
  return (
    <div className="grand">
      <h3>我是C组件</h3>
      <h4>我从A组件接收到的用户名：
      <Consumer>
          {
              value =>{
                  return `${value.name},年龄为：${value.age}`
              }
          }
      </Consumer>
      </h4>
    </div>
  );
}

export default A;
